<!--过滤查询-->
<nz-row>
  <!--    <div class="rowItem">-->
  <!--      <label for="number">订单编号</label>-->
  <!--      <input id="number" nz-input placeholder="请输入订单号" [(ngModel)]="query.orderNum"/>-->
  <!--    </div>-->
  <!--    <div class="rowItem">-->
  <!--      <label for="user">用户</label>-->
  <!--      <input id="user" nz-input placeholder="请输入用户Id" [(ngModel)]="query.userId"/>-->
  <!--    </div>-->
</nz-row>
<div style="margin-bottom: 8px">
  <button nz-button nzType="primary" (click)="add()">添加分类</button>
</div>
<!--表格-->
<nz-table #basicTable [nzData]="listOfData.records"
          nzSize="small"
          nzShowSizeChanger
          nzShowPagination="false"
          [nzFrontPagination]="false"
>
  <thead>
  <tr>
    <th nzAlign="center">序号</th>
    <th nzAlign="center">名称</th>
    <th nzAlign="center">图片</th>
    <th nzAlign="center">状态</th>
    <th nzAlign="center" nzWidth="400px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of basicTable.data;let index=index;">
    <td nzAlign="center">{{ index + 1 }}</td>
    <td nzAlign="center">{{ data['name'] }}</td>
    <td nzAlign="center">
      <img
        nz-image
        width="60px"
        height="60px"
        *ngIf="data['icon']"
        [nzSrc]="data['icon']"
        [alt]="data['name']"
      />
    </td>
    <td nzAlign="center" [attr.status]="data['status']">{{ STATUS[data['status']]}}</td>
    <td nzAlign="center">
      <a (click)="move(data['id'],1)" *ngIf="index!==0">上移</a>
      <a (click)="move(data['id'],0)" *ngIf="index+1!==basicTable.data.length">下移</a>
      <a (click)="editCategory(data)">编辑</a>
      <a *ngIf="data['status']===0" [attr.statusColor]="data['status']" (click)="changeCategoryStatus(data,1)">禁用</a>
      <a *ngIf="data['status']===1" [attr.statusColor]="data['status']" (click)="changeCategoryStatus(data,0)">启用</a>
      <a nzPopconfirmPlacement="top" [attr.statusColor]="0"
         nz-popconfirm
         nzPopconfirmTitle="确认要删除?"
         nzOkText="确认"
         nzCancelText="取消" (nzOnConfirm)="changeCategoryStatus(data,2)">删除</a>
      <a (click)="showCommodityModal(data['id'])">商品管理({{data['count']}})</a>
    </td>
  </tr>
  </tbody>
</nz-table>


<!--分类管理-->
<nz-modal
  [(nzVisible)]="addCategoryModal.visible"
  nzTitle="分类管理"
  (nzOnCancel)="hideAddCategoryModal()">
  <div *nzModalContent>
    <div class="rowItem">
      <label for="addCategoryModalName"><span>*</span>名称</label>
      <input id="addCategoryModalName" nz-input placeholder="请输入分类名称" [(ngModel)]="addCategoryModal.name"/>
    </div>
    <div class="rowItem">
      <label for="addCategoryModalImage"><span>*</span>图片</label>
      <app-image-upload id="addCategoryModalImage" style="width: 250px;display: inline-block"
                        [maxImgLength]="1"
                        [imageUrl]="addCategoryModal.image"
                        (deleteImg)="addCategoryModal.image=''"
                        (urlChange)="addCategoryModal.image=$event"></app-image-upload>
    </div>
    <div class="rowItem">
      <label for="addCategoryModalStatus"><span>*</span>状态</label>
      <nz-radio-group id="addCategoryModalStatus" [(ngModel)]="addCategoryModal.status">
        <label nz-radio [nzValue]="0">启用</label>
        <label nz-radio [nzValue]="1">禁用</label>
      </nz-radio-group>
    </div>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hideAddCategoryModal()">取消</button>
    <button nz-button nzType="primary" (click)="saveCategory()">确认</button>
  </div>
</nz-modal>

<!--商品管理-->
<nz-modal
  [(nzVisible)]="commodityModal.visible" [nzFooter]="null"
  nzTitle="商品管理" nzWidth="1200px"
  (nzOnCancel)="hideCommodityModal()">
  <div *nzModalContent>
    <div>
      <div class="searchItem">
        <label for="commodity">商品：</label>
        <input id="commodity" nz-input placeholder="请输入商品编号、名称" [(ngModel)]="commodityModal.query.goods"/>
      </div>
      <div class="searchItem">
        <label>分类：</label>
<!--        <nz-select [(ngModel)]="commodityModal.query.typeList" nzMode="multiple"-->
<!--                   [nzMaxTagCount]="1" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">-->
<!--          <nz-option [nzValue]="b['id']" [nzLabel]="b['name']" *ngFor="let b of commodityModal.typeOptions"></nz-option>-->
<!--        </nz-select>-->

        <nz-tree-select
          nzDefaultExpandAll
          nzShowSearch
          nzCheckable
          nzCheckStrictly
          nzHideUnMatched
          nzPlaceHolder="请选择商品分类"
          nzVirtualHeight="400px"
          [nzMaxTagCount]="1"
          [nzNodes]="commodityModal.typeOptions"
          [(ngModel)]="commodityModal.query.typeList"
        ></nz-tree-select>
      </div>
      <div class="searchItem">
        <label>品牌：</label>
        <nz-select [(ngModel)]="commodityModal.query.brandList" nzMode="multiple"
                   [nzMaxTagCount]="1" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
          <nz-option [nzValue]="b['id']" [nzLabel]="b['name']" *ngFor="let b of commodityModal.brandOptions"></nz-option>
        </nz-select>
      </div>
      <div class="searchItem">
        <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
        <button nz-button nzType="default" (click)="resetCondition()">重置</button>
      </div>
      <nz-radio-group [(ngModel)]="commodityModal.type" (ngModelChange)="changeView(true)" style="float: right">
        <label nz-radio-button nzValue="add">待添加</label>
        <label nz-radio-button nzValue="remove">已添加</label>
      </nz-radio-group>
    </div>
    <!--表格-->
    <nz-table
      #rowSelectionTable
      nzSize="small"
      nzTableLayout="fixed"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzData]="commodityModal.listOfData.records"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="commodityModal.listOfData.total"
      [(nzPageIndex)]="commodityModal.query.page"
      [(nzPageSize)]="commodityModal.query.pageSize"
      [nzFrontPagination]="false"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
      <tr>
        <th nzAlign="center">商品编号</th>
        <th nzAlign="center" nzWidth="300px">商品名称</th>
        <th nzAlign="center">商品分类</th>
        <th nzAlign="center">商品品牌</th>
        <th nzAlign="center">适用用户</th>
        <th nzAlign="center">商品库存</th>
        <th nzAlign="center">C端单价</th>
        <th nzAlign="center">商品状态</th>
        <th nzAlign="center" nzWidth="160px">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
        <td nzAlign="center">{{data['code']}}</td>
        <td nzAlign="center" [nzEllipsis]="true" [nzTooltipTitle]="data['name']" nzTooltipPlacement="topCenter"
            nz-tooltip>{{data['name']}}</td>
        <td nzAlign="center">{{data['typeName']}}</td>
        <td nzAlign="center">{{data['brandName']}}</td>
        <td nzAlign="center">{{USERTYPE[data['userType']]}}</td>
        <td nzAlign="center">{{data['stockNum']}}</td>
        <td nzAlign="center">{{data['shopPriceC']}}</td>
        <td nzAlign="center">{{COMMODITYSTATUS[data['status']]}}</td>
        <td nzAlign="center">
          <a (click)="changeStatus(data,true)" *ngIf="commodityModal.type==='add'">添加</a>
          <a (click)="changeStatus(data,false)" *ngIf="commodityModal.type==='remove'">删除</a>
        </td>
      </tr>
      </tbody>
    </nz-table>
    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ commodityModal.listOfData.total }} 条</ng-template>
  </div>
</nz-modal>
